<template>
  <div v-if="gatewayInfo" class="gateway-container">
    <div class="dis-table-wrap">
      <div class="dis-title">
        <span>网关状态</span>

        <el-dropdown v-permission="['Admin.Remote.Update']" trigger="click" @command="handleCommand">
          <el-button type="primary">
            操作网关<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu v-permission="['Admin.Remote.Update']" slot="dropdown">
            <!--<el-dropdown-item :disabled="gatewayInfo.managerConnectionStatus!==1" command="a">恢复网关出厂设置
            </el-dropdown-item>-->
            <el-dropdown-item :disabled="gatewayInfo.managerConnectionStatus!==1" command="b">重启网关</el-dropdown-item>
            <el-dropdown-item :disabled="gatewayInfo.managerConnectionStatus!==1" command="c">重置网关管理员密码
            </el-dropdown-item>
            <el-dropdown-item :disabled="gatewayInfo.managerConnectionStatus!==1" command="d">获取网关配置</el-dropdown-item>
            <el-dropdown-item :disabled="gatewayInfo.managerConnectionStatus===1" command="e">启用网关</el-dropdown-item>
            <el-dropdown-item :disabled="gatewayInfo.managerConnectionStatus!==1" command="f">停用网关</el-dropdown-item>
            <el-dropdown-item command="g">删除网关</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <!--<el-button v-permission="['Admin.Remote.Update']" :loading="isSubmitLoading" type="primary" @click="gatewayInit">恢复网关出厂设置</el-button>
        <el-button v-permission="['Admin.Remote.Update']" :loading="isSubmitLoading" type="primary" @click="gatewayReBoot">重启网关</el-button>
        <el-button v-permission="['Admin.Remote.Update']" :loading="isSubmitLoading" type="primary" @click="gatewayResetPass">重置网关管理员密码</el-button>
        <el-button v-permission="['Admin.Remote.Update']" :loading="isSubmitLoading" type="primary" @click="applySyncConfig">上传网关配置</el-button>-->
      </div>
      <el-alert
        v-if="gatewayInfo.managerConnectionStatus!==1"
        class="gateway-alert"
        title="网关已断开"
        show-icon
        type="error"
      >
      </el-alert>
      <el-table
        :key="tableKey"
        :data="[gatewayInfo]"
        class="trans-table"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="通道使用情况" align="center" min-width="90">
          <template slot-scope="{row}">
            {{ row.portNumber+'/'+row.portNumberMax }}
          </template>
        </el-table-column>
        <el-table-column label="数据源总数" align="center" min-width="90">
          <template slot-scope="{row}">
            {{ row.equipmentISNumber+'/'+row.equipmentNumber }}
          </template>
        </el-table-column>
        <el-table-column label="数据采集点总数" align="center" min-width="90">
          <template slot-scope="{row}">
            {{ row.dataElementISNumber+'/'+row.dataElementNumber }}
          </template>
        </el-table-column>
        <el-table-column label="网关运行状态" align="center" min-width="90">
          <template slot-scope="{row}">
            <el-tag :title="row.statusDetail" v-if="row.status===0">未知</el-tag>
            <el-tag :title="row.statusDetail" v-if="row.status===1">运行中</el-tag>
            <el-tag :title="row.statusDetail" type="danger" v-if="row.status===2">故障 <i class="el-icon-warning"></i></el-tag>
            <el-tag :title="row.statusDetail" v-if="row.status===3">已停用</el-tag>
            <el-tag :title="row.statusDetail" v-if="row.status===4">备机启用中</el-tag>
            <el-tag :title="row.statusDetail" v-if="row.status===5">备机备用中</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="dis-table-wrap">
      <!--        <div class="dis-title">通道使用率</div>-->
      <el-table
        :key="tableKey"
        :data="[gatewayInfo]"
        class="trans-table"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="A NET 硬盘使用率" align="center" min-width="90">
          <template slot-scope="{row}">
            {{ row.adiskUsage===null?'':row.adiskUsage }}%
          </template>
        </el-table-column>
        <el-table-column label="A NET 内存使用率" align="center" min-width="90">
          <template slot-scope="{row}">
            {{ row.amemoryUsage===null?'':row.amemoryUsage }}%
          </template>
        </el-table-column>
        <el-table-column label="A NET CPU使用率" align="center" min-width="90">
          <template slot-scope="{row}">
            {{ row.acpuUsage===null?'':row.acpuUsage }}%
          </template>
        </el-table-column>
        <el-table-column label="B NET 硬盘使用率" align="center" min-width="90">
          <template slot-scope="{row}">
            {{ row.bdiskUsage===null?'':row.bdiskUsage }}%
          </template>
        </el-table-column>
        <el-table-column label="B NET 内存使用率" align="center" min-width="90">
          <template slot-scope="{row}">
            {{ row.bmemoryUsage===null?'':row.bmemoryUsage }}%
          </template>
        </el-table-column>
        <el-table-column label="B NET CPU使用率" align="center" min-width="90">
          <template slot-scope="{row}">
            {{ row.bcpuUsage===null?'':row.bcpuUsage }}%
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="dis-table-wrap">
      <!--        <div class="dis-title">网关状态</div>-->
      <table class="dis-table">
        <tr>
          <th>省市区</th>
          <td>
            {{ gatewayInfo.province || '' }}
            {{ gatewayInfo.city || '' }}
            {{ gatewayInfo.region || '' }}
          </td>
          <th>详细位置</th>
          <td>{{ gatewayInfo.detailAddress }}</td>
          <th>联系方式</th>
          <td>{{ gatewayInfo.contact }}</td>
        </tr>
        <tr>
          <th>公司名称</th>
          <td>{{ gatewayInfo.company }}</td>
          <th>网关编码</th>
          <td>{{ gatewayInfo.deviceCode }}</td>
          <th>网关SN</th>
          <td>{{ gatewayInfo.sn }}</td>
        </tr>
        <tr>
          <th>网管地址</th>
          <td>{{ gatewayInfo.managerIp }}</td>
          <th>网管连接状态</th>
          <td>
            <span v-if="gatewayInfo.managerConnectionStatus===0">未配置</span>
            <span v-if="gatewayInfo.managerConnectionStatus===1">已连接</span>
            <span v-if="gatewayInfo.managerConnectionStatus===2">已断开</span>
          </td>
          <th>网关状态</th>
          <td>
            <span v-if="gatewayInfo.status===0">未知</span>
            <span v-if="gatewayInfo.status===1">运行中</span>
            <span v-if="gatewayInfo.status===2">故障</span>
            <span v-if="gatewayInfo.status===3">已停用</span>
            <span v-if="gatewayInfo.status===4">备机启用中</span>
            <span v-if="gatewayInfo.status===5">备机备用中</span>
          </td>
        </tr>
        <tr>
          <th>配置端口</th>
          <td>{{ gatewayInfo.configConsoleConnected?'已连接':'已断开' }}</td>
          <th>配置应用状态</th>
          <td>
            <span v-if="gatewayInfo.configApplyStatus===0">未配置</span>
            <span v-if="gatewayInfo.configApplyStatus===1">未应用</span>
            <span v-if="gatewayInfo.configApplyStatus===2">已应用</span>
            <span v-if="gatewayInfo.configApplyStatus===3">应用中</span>
            <span v-if="gatewayInfo.configApplyStatus===4">应用失败</span>
          </td>
          <th>配置同步状态</th>
          <td>
            <span v-if="gatewayInfo.configSyncStatus===0">未配置</span>
            <span v-if="gatewayInfo.configSyncStatus===1">未同步</span>
            <span v-if="gatewayInfo.configSyncStatus===2">已同步</span>
            <span v-if="gatewayInfo.configSyncStatus===3">同步中</span>
            <span v-if="gatewayInfo.configSyncStatus===4">同步失败</span>
          </td>
        </tr>
        <tr>
          <th>状态更新时间</th>
          <td colspan="5">{{ gatewayInfo.latUpdateTime | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}</td>
        </tr>
      </table>
    </div>
    <div class="dis-table-wrap">
      <div class="dis-title">通道状态</div>
      <el-table
        :key="tableKey"
        :data="gatewayInfo.ports"
        class="trans-table"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="通道ID" prop="id" align="center" width="70"></el-table-column>
        <el-table-column label="通道名" prop="name" align="center" min-width="90"></el-table-column>
        <el-table-column label="配置数据源数" align="center" prop="equipCNum" min-width="90"></el-table-column>
        <el-table-column label="应用数据源数" align="center" prop="equipNum" min-width="90"></el-table-column>
        <el-table-column label="配置数据点数" align="center" prop="deCNum" min-width="90"></el-table-column>
        <el-table-column label="应用数据点数" align="center" prop="deNum" min-width="90"></el-table-column>
        <el-table-column label="活跃数据点数" align="center" prop="deActNum" min-width="90"></el-table-column>
        <el-table-column label="端口状态" align="center" min-width="90">
          <template slot-scope="{row}">
            {{ transStatus(row.status) }}
          </template>
        </el-table-column>
        <el-table-column label="服务状态" align="center" min-width="90">
          <template slot-scope="{row}">
            {{ transDataStatus(row.dataStatus) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import { getGatewayStatistics, applySyncConfig, startGateway, stopGateway, deleteGateway } from "@/api/gateway";
  import { gatewayInit, gatewayResetPass, gatewayReBoot } from "@/api/settings/index";
  import { logLevelOptions } from '@/utils/enums.js';

  export default {
    components: {},
    data() {
      return {
        logLevelOptions,
        isSubmitLoading: false,
        tableLoading: false,
        tableKey: 0,
        gatewayInfo: undefined,
        gatewayId: undefined,
        totalCount: 0,
        timer: undefined
      };
    },
    computed: {},
    watch: {},
    destroyed() {
    },
    created() {
    },
    methods: {
      handleCommand(command) {
        console.log(command);
        switch (command) {
          case 'a':
            this.gatewayInit();
            break;
          case 'b':
            this.gatewayReBoot();
            break;
          case 'c':
            this.gatewayResetPass();
            break;
          case 'd':
            this.applySyncConfig();
            break;
          case 'e':
            this.startGateway();
            break;
          case 'f':
            this.stopGateway();
            break;
          case 'g':
            this.deleteGateway();
            break;
        }
      },
      getGatewayStatistics(gatewayId) {
        if (gatewayId) {
          this.gatewayId = gatewayId;
          this.tableLoading = true;
          // 根据id查询某个通道信息
          getGatewayStatistics(gatewayId).then(result => {
            this.gatewayInfo = result;
            this.tableLoading = false;
          });
        }
      },
      gatewayInit() {
        this.$confirm("是否继续恢复网关出厂设置操作?", "确定恢复网关出厂设置吗？", { type: "warning" })
          .then(() => {
            gatewayInit(this.gatewayId).then(() => {
              this.$message({ message: "恢复网关出厂设置成功", type: "success" });
              this.getGatewayStatistics(this.gatewayId);
            });
          })
          .catch(() => {
          });
      },
      gatewayReBoot() {
        this.$confirm("是否继续重启网关操作?", "确定重启网关吗？", { type: "warning" })
          .then(() => {
            gatewayReBoot(this.gatewayId).then(() => {
              this.$message({ message: "重启网关成功", type: "success" });
              this.getGatewayStatistics(this.gatewayId);
            });
          })
          .catch(() => {
          });
      },
      gatewayResetPass() {
        this.$confirm("是否继续重置网关超级管理员密码操作?", "确定重置网关超级管理员密码吗？", { type: "warning" })
          .then(() => {
            gatewayResetPass(this.gatewayId).then(() => {
              this.$message({ message: "重置网关超级管理员密码成功", type: "success" });
              this.getGatewayStatistics(this.gatewayId);
            });
          })
          .catch(() => {
          });
      },
      applySyncConfig() {
        this.$confirm("该操作将获取网关配置， 是否继续?", "确定执行获取网关配置操作吗？", { type: "warning" })
          .then(() => {
            this.isSubmitLoading = true;
            applySyncConfig(this.gatewayId)
              .then(() => {
                this.$message({
                  message: "获取网关配置成功",
                  type: "success"
                });
                this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
              })
              .catch(() => {
                this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
              });
          })
          .catch(() => {

          });
      },
      startGateway() {
        this.$confirm("是否继续启用网关操作?", "确定启用网关吗？", { type: "warning" })
          .then(() => {
            startGateway(this.gatewayId).then(() => {
              this.$message({ message: "网关启用成功", type: "success" });
              this.getGatewayStatistics(this.gatewayId);
            });
          })
          .catch(() => {
          });
      },
      stopGateway() {
        this.$confirm("是否继续停用网关操作?", "确定停用网关吗？", { type: "warning" })
          .then(() => {
            stopGateway(this.gatewayId).then(() => {
              this.$message({ message: "网关停用成功", type: "success" });
              this.getGatewayStatistics(this.gatewayId);
            });
          })
          .catch(() => {
          });
      },
      deleteGateway() {
        this.$confirm("是否继续删除网关操作?", "确定删除网关吗？", { type: "warning" })
          .then(() => {
            deleteGateway(this.gatewayId).then(() => {
              this.$message({ message: "网关删除成功", type: "success" });
              this.$emit('delete');
            });
          })
          .catch(() => {
          });
      },
      tableRowClassName({ row, rowIndex }) {
        if (row.level === "ERROR") {
          return 'danger-row';
        }
        return '';
      },
      transStatus(status) {
        let returnVal = '';
        switch (status) {
          case 0:
            returnVal = '未配置';
            break;
          case 1:
            returnVal = '运行中';
            break;
          case 2:
            returnVal = '运行检测失败';
            break;
          case 3:
            returnVal = '已停止';
            break;
          case 4:
            returnVal = '启动失败';
            break;
          case 5:
            returnVal = '等待中';
            break;
          case 6:
            returnVal = '启动中';
            break;
          case 7:
            returnVal = '停止中';
            break;
          case 8:
            returnVal = '停止失败';
            break;
        }
        return returnVal;
      },
      transDataStatus(status) {
        let returnVal = '';
        switch (status) {
          case 0:
            returnVal = '正常';
            break;
          case 1:
            returnVal = '无物理端口';
            break;
          case 2:
            returnVal = '无数据源';
            break;
          case 4:
            returnVal = '无数据点';
            break;
          case 8:
            returnVal = '无本地串口地址(COM)/本地IP地址(TCP)';
            break;
          case 16:
            returnVal = '无本地端口(TCP)';
            break;
          case 32:
            returnVal = '本地串口地址无效(COM)/本地IP地址无效(TCP)';
            break;
          case 64:
            returnVal = '数据读取超时';
            break;
        }
        return returnVal;
      }
    }
  };
</script>

<style lang="scss">

  .dis-table-wrap {
    background-color: #fff;

    & + .dis-table-wrap {
      margin-top: 20px;
    }
  }

  .dis-title {
    display: flex;
    padding: 20px 0;
    font-weight: bold;

    &:before {
      content: '';
      width: 5px;
      height: 18px;
      background-color: #409EFF;
      margin-right: 10px;
    }

    span {
      flex: 1;
    }
  }

  .dis-table {
    width: 100%;
    border-collapse: collapse;

    tr {
      th {
        width: 140px;
        font-size: 14px;
        text-align: left;
        background: #eef1f6;
      }

      td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        line-height: 23px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
        color: #606266;
      }

      th, td {
        border: 1px solid #dfe6ec;
        padding: 8px;
        vertical-align: middle;
      }
    }
  }

  .trans-table {
    tr {
      th {
        background: #eef1f6;
        color: #000000;
      }
    }
  }

  .gateway-alert {
    margin-bottom: 20px;
  }
</style>
